<template>
  <el-form :model="item" ref="moForm" :rules="rules" label-width="130px">
    <el-form-item prop="productName" label="产品名称">
      <el-input
        v-model.trim="item.productName"
        placeholder="请输入产品名称"
      ></el-input>
    </el-form-item>
    <!-- 产品主图  nameImg -->
    <el-form-item prop="productImageFile" label="产品主图">
      <el-button class="setimg" type="primary" @click="setImg('fileInput')"
        >选择图片</el-button
      >
      <br />
      <span class="imginfo">请选择.jpg/.png格式图片，大小不超过2M</span>
      <input
        type="file"
        accept=".jpg, .png"
        id="fileInput"
        @change="imgChange($event, 'productImageFile')"
      />
      <div class="imgbox">
        <img :src="productImage" id="image" />
      </div>
    </el-form-item>
    <!-- 产品详情图  centerImg -->
    <el-form-item prop="productDetailImageFile" label="产品详情图">
      <el-button class="setimg" type="primary" @click="setImg('fileInput1')"
        >选择图片</el-button
      >
      <br />
      <span class="imginfo">请选择.jpg/.png格式图片，大小不超过2M</span>
      <input
        type="file"
        accept=".jpg, .png"
        id="fileInput1"
        @change="imgChange($event, 'productDetailImageFile')"
      />
      <div class="imgbox">
        <img :src="productDetailImage" id="image" />
      </div>
    </el-form-item>

    <el-form-item prop="jifen" label="积分">
      <el-input v-model.trim="item.jifen" placeholder="请输入积分"></el-input>
    </el-form-item>
    <el-form-item prop="price" label="价格">
      <el-input v-model.trim="item.price" placeholder="请输入价格"></el-input>
    </el-form-item>
    <el-form-item prop="jifenAndPrice" label="积分+价格">
      <el-input
        v-model.trim="item.jifenAndPrice"
        placeholder="请输入积分+价格"
      ></el-input>
    </el-form-item>
    <el-form-item prop="count" label="库存">
      <el-input v-model.trim="item.count" placeholder="请输入库存"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleSubmitClick()">提交</el-button>
      <el-button @click="handleBackClick">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: ["item"],
  data() {
    const check_date = (rule, val, callback) => {
      console.log(this.item.beginTime && val);
      console.log(this.item.beginTime > val);
      if (this.item.beginTime && val && this.item.beginTime > val) {
        callback("请选择合法的开始结束时间");
      } else {
        callback();
      }
    };
    return {
      reader: null,
      imgBase: "",
      productImage: "",
      productDetailImage: "",
      cates: [],
      rules: {
        // imageFile: [{ required: true, message: "请选择图片", trigger: "blur" }],
        // link: [
        //   { required: true, message: "请选择活动链接", trigger: "blur" },
        //   { type: "url", message: "请输入正确格式的链接", trigger: "blur" },
        // ],
      },
    };
  },
  computed: {
    obj() {
      return {
        productName: this.item.productName,
        productImage: this.item.productImage,
        productImageFile: this.item.productImageFile,
        productDetailImage: this.item.productDetailImage,
        productDetailImageFile: this.item.productDetailImageFile,
        jifen: this.item.jifen,
        jifenId: this.item.jifenId,
        count: this.item.count,
        price: this.item.price,
        priceId: this.item.priceId,
        jifenAndPrice: this.item.jifenAndPrice,
        jifenAndPriceId: this.item.jifenAndPriceId,
        payWay: this.item.payWay,
        list: this.item.list,
        productId: this.item.productId,
      };
    },
  },
  watch: {},
  created() {
    this.reader = new FileReader();
    this.reader.onload = (e) => {
      this.imgBase = e.target.result;
    };
    setTimeout(() => {
      if (this.item.productImage) this.productImage = this.item.productImage;
      if (this.item.productDetailImage)
        this.productDetailImage = this.item.productDetailImage;
    }, 500);
  },
  methods: {
    handleBackClick() {
      this.$router.go(-1);
    },
    handleSubmitClick() {
      this.$emit("doSubmit");
    },
    valid(callback) {
      this.$refs["moForm"].validate((valid) => {
        callback(valid);
      });
    },
    setImg(id) {
      const target = document.getElementById(id);
      target && target.click();
    },
    imgChange(e, image) {
      console.log(e);
      const img = e.target.files[0];
      if (img.size / 1024 < 2 * 1024) {
        this.reader.readAsDataURL(img);
        if (image === "productImageFile") this.item.productImageFile = img;
        if (image === "productDetailImageFile")
          this.item.productDetailImageFile = img;

        setTimeout(() => {
          const pos = this.imgBase.indexOf("base64") + 7;
          this.imgBase = this.imgBase.substr(pos);
          if (image === "productImageFile")
            this.productImage = "data:image/png;base64," + this.imgBase;
          if (image === "productDetailImageFile")
            this.productDetailImage = "data:image/png;base64," + this.imgBase;
        }, 500);
      } else {
        this.$message.error("图片大小不可超过2M");
      }
      ["productImageFile", "productDetailImageFile"].forEach((i) => {
        this.$refs["moForm"].validateField(i);
      });
    },
  },
};
</script>

<style scoped>
#fileInput,
#fileInput1,
#fileInput2,
#fileInput3 {
  width: 0;
  height: 0;
  overflow: hidden;
}

.setimg {
  float: left;
  margin-left: 0;
}

.imgbox {
  border: 1px solid #eee;
  width: 200px;
  height: auto;
}

.imgbox img {
  align: center;
  max-width: 100%;
}

.imginfo {
  font-size: 12px;
  color: #666;
}
</style>
